<template>
  <div class="cop-list">
    <div class="header">
      <AppHeader>
        <div class="title">{{ $route.query.building_name }}</div>
        <template slot="right">
          <a href="" class="btn-dl">下载</a>
          <a href="" class="btn-search">搜索</a>
          <router-link :to="{ name: 'Filter' }" class="btn-filter">
            筛选
          </router-link>
        </template>
      </AppHeader>
      <div class="nav">
        <a :class="{ active: !currentFloor }" @click="onFloorClick(null)">
          全部
        </a>
        <template v-for="floor in floors">
          <a
            :key="floor.value"
            :class="{ active: currentFloor === floor }"
            @click="onFloorClick(floor)"
          >
            {{ floor.label }}
          </a>
        </template>
      </div>
    </div>
    <div class="main">
      <div class="summery">
        <span v-if="currentFloor">
          {{ currentFloor.label }}
        </span>
        共找到
        <span>{{ total }}</span>
        条企业信息
      </div>

      <div class="list-item">
        <div class="hd">
          <div class="col1">房号</div>
          <div class="col2">公司信息</div>
          <div class="col3">操作</div>
        </div>
        <div class="bd">
          <InfinityList :service="infinityList">
            <template v-for="item in items">
              <router-link
                :key="item.id"
                class="con-item attachment"
                :to="{
                  name: 'Company',
                  params: { id: item.id }
                }"
              >
                <div class="col1">{{ getRoomNo(item) }}</div>
                <div class="col2">
                  <div class="name">{{ item.name }}</div>
                  <p class="info">法人代表：{{ item.operName }}</p>
                  <p class="info">注册资本：{{ item.registCapi }}</p>
                  <p class="info">成立日期：{{ item.startDate }}</p>
                  <p v-if="item.noteList.length" class="tags">
                    <span v-for="tag in item.noteList" :key="tag">
                      {{ tag }}
                    </span>
                  </p>
                </div>
                <div class="col3"><a href="" class="btn-tag"></a></div>
              </router-link>
            </template>
          </InfinityList>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { computed, ref } from "@vue/composition-api";
import InfinityList from "../components/InfinityList";
import { useInfinityList } from "../use/useInfinityList";
import { getRoomNo } from "../utils/format";

export default {
  name: "List",
  components: { InfinityList },

  setup(props, { root: { $route } }) {
    // Query
    const floors = ref(
      Array.from({ length: parseInt($route.query.floor) }).map((_, i) => ({
        label: `${i + 1}层`,
        value: i + 1
      }))
    );
    const currentFloor = ref(null);

    function onFloorClick(floor) {
      currentFloor.value = floor;
      infinityList.api.reload();
    }

    // Fetch
    const queryData = computed(() => ({
      parkArea: $route.params.aid,
      building: $route.params.id,
      floor: currentFloor.value?.value
    }));

    const infinityList = useInfinityList(
      "cedar-system/enterprise/getuseenterprise",
      {
        data: queryData
      }
    );

    const { items, total } = infinityList;

    return {
      floors,
      currentFloor,
      onFloorClick,
      infinityList,
      items,
      total,
      getRoomNo
    };
  }
};
</script>
